<template>
<!-- 发布作品 -->
  <div class="home">
    <menuBar></menuBar>
    <div class="content">
        <headPortrait class="headPortrait"></headPortrait>
       <div class="inform">
          <img class="informIcon" src="@/assets/img/writer/inform.png" >
          <span class="title">最新消息</span>
          <span class="text">您发布的视频‘唤醒科技互联网专场’已通过一审，等待二审中...</span>
          <span>查看</span>
          <img class="more" src="@/assets/img/writer/more.png" >
       </div>
        <div class="page">
            <div class="title">
                新的创作
            </div>
            <div class="contentArr">
                <div class="contentItem" @click="goPageItem(1)">
                    <img src="@/assets/img/writer/item2.png" >
                    <div class="text"  >发布文章</div>
                    <div class="count">
                      已发布{{ state.numObj.article}}遍
                    </div>
                </div>
                <div class="contentItem" @click="goPageItem(2)">
                  <img src="@/assets/img/writer/item3.png" >
                  <div class="text">发布视频</div>
                  <div class="count">
                    已发布{{ state.numObj.video}}个
                  </div>
                </div>
                <div class="contentItem" @click="goPageItem(3)">
                  <img src="@/assets/img/writer/item4.png" >
                  <div class="text">发布简讯</div>
                  <div class="count">
                    已发布{{ state.numObj.newsletter}}个
                  </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import menuBar from './component/menuBar'
import headPortrait from './component/headPortrait'
const state = reactive({
    numObj:{},
  });
export default {
  name: 'postProduction',
  components: {
    menuBar,
    headPortrait,
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
       function goPageItem(_index){

        if (_index===1) {
          router.push({name:'publishArticle'})
        }else if (_index===2) {
          router.push({name:'releaseVideos'})
        }else if (_index===3) {
          router.push({name:'releaseNewsletter'})
        }
      };
       function getCount(){
        _this.$request({
          url:'/api/pcWriter/information_count',
        }).then(res=>{
          if (res.code===1) {
            state.numObj = res.data
            // state.numObj = res.data.article
            // state.typeArr[1].num = res.data.video
            // state.typeArr[2].num = res.data.newsletter
          }
        })
      }
      function getTypeArr(){
        _this.$request({
          url:'/api/pcWriter/classfly_list',
          data:{
            page:'1',
            pagesize:'11',
          }
        }).then(res=>{
          if (res.code==1) {
            localStorage.writeTypeArr = JSON.stringify(res.data.data)
            store.dispatch('getTypeArr',res.data.data)
            console.log( store.state.writer.typeArr);
          }else{
            
          }
        })
      };
      onMounted(()=>{
        getTypeArr()
        getCount()
      });

      return{
        state,goPageItem,store
      }
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
}
</script>
<style lang="scss" scoped>
    @media screen and (max-width: 1000px) {
       .home{
         .content{
           width: 100% !important;
         }
       }
      
    }


    .home{
      display: flex;
      height: 100vh;
      .content{
        width: calc( 100vw - 255px );
        position: relative;
        .inform{
          position: absolute;
          top: 11%;
          left: 2.5%;
          background-color: #fff;
          height: 56px;
          width: 95%;
          border-radius: 10px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10% 0 2%;
          .text{
            flex: 1;
            padding-left: 30px;
            border-left: 2px solid #E0E0E0;
          }
          span{
            color: #2E3C6D;
          }
          .title{
            margin: 0 15px;
          }
          .more{
            margin-left: 10px;
          }
         img{
           width: 20px;
           height: 21px;
         }
          // box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
        }
        .page{
          overflow-y: auto;
          overflow-x: hidden;
          position: absolute;
          top: 20%;
          left: 2.5%;
          background-color: #fff;
          height: 78%;
          width: 95%;
          border-radius: 10px;
          box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
          .title{
            font-size: 20px;
            margin: 27px 43px;
            color: #1C1A1D;
            font-weight: 400;
          }
          .contentArr{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .contentItem{
              width: 432px;
              min-width: 400px;
              height: 242.9px;
              position: relative;
              cursor: pointer;
              img{
                position: absolute;
                width: 100%;
              }
              &:nth-child(1) .text , &:nth-child(1) .count{
                color: #fff;
              }
              .text{
                position: relative;
                top: 20%;
                left: 12%;
                color: #1C1A1D;
                font-size: 28px;
              }
              &:nth-child(1) .count:before{
                  content: '';
                  background-color: #1544BC;
              }
              &:nth-child(1) .count::after{
                  content: '';
                  background-color: #fff;
                  width: 40%;
              }
              .count{
                position: relative;
                left: 12%;
                top: 47%;
                color: #1C1A1D;
                &:before{
                  content: '';
                  position: absolute;
                  bottom: -90%;
                  height: 6.7px;
                  width: 65%;
                  background-color: #F1F5FF;
                  border-radius: 20px;
                }
                &::after{
                  content: '';
                  position: absolute;
                  bottom: -90%;
                  left: 0;
                  height: 6.7px;
                  width: 20%;
                  background-color: #4977FC;
                  border-radius: 20px;
                }


              }

            }
          }
        }
      }
    }
</style>
